<template>
	<el-form style="width: 400px;">
		<el-form-item label="工 号：" prop="sid">
			<span>{{sid}}</span>
		</el-form-item>
		<el-form-item label="姓 名：" prop="sname">
			<el-input prefix-icon="el-icon-user" style="width: 200px" type="text" 
			v-model="sname" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="性 别：" prop="sex">
			<el-input prefix-icon="el-icon-user" style="width: 200px" type="text" 
			v-model="sex" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="年 龄：" prop="age">
			<el-input prefix-icon="el-icon-user" style="width: 200px" type="text" 
			v-model="age" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="电 话：" prop="phone">
			<el-input prefix-icon="el-icon-user" style="width: 200px" type="text" 
			v-model="phone" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="住 址：" prop="address">
			<el-input prefix-icon="el-icon-user" style="width: 200px" type="text" 
			v-model="address" autocomplete="off"></el-input>
		</el-form-item>
		<el-button type="primary" @click="updata">保存</el-button>
		<el-button style="color: #FF0000;" @click="exit">注销</el-button>
	</el-form>
	<el-form class="images">
		<el-image src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"></el-image>
	</el-form>
</template>

<script>
	import qs from 'qs'
	import { ElMessage } from 'element-plus'
	export default{
		name:"app",
		data(){
			return{
				sid:"",
				sname:"",
				sex:"",
				age:0,
				phone:"",
				address:"",
				ruleForm:{
					sid:"",
					sname:"",
					sex:"",
					age:0,
					phone:"",
					address:"",
				}
			}
		},
		methods:{
			exit(){
				this.$router.push('/login');
			},
			getInfors(){
				let that=this
				that.staff=sessionStorage.getItem("staff")
				var obj=JSON.parse(that.staff)
				that.sid=obj.sid
				that.sname=obj.sname
				that.sex=obj.sex
				that.age=obj.age
				that.phone=obj.phone
				that.address=obj.address
				that.ruleForm.sid=obj.sid
				that.ruleForm.sname=obj.sname
				that.ruleForm.sex=obj.sex
				that.ruleForm.age=obj.age
				that.ruleForm.phone=obj.phone
				that.ruleForm.address=obj.address
				console.log(that.ruleForm.address)
			},
			updata(){
				let that=this
				let str=qs.stringify(that.ruleForm)
				that.$axios.get("http://localhost:8080/staff/user?"+str).then(function(res){
					if(res.data==1){
						 ElMessage.success('保存成功')
					}else{
						 ElMessage.error('保存失败')
					}
				})
			},
		},
		created() {
			this.getInfors()
			//this.updata()
		},
		watch:{
			sname(newValue,oldValue){
				if(newValue.length<=20){
					this.sname=newValue
					this.ruleForm.sname=newValue
				}else{
					this.sname=oldValue
				}
				// console.log(this.sname)
			},
			sex(nv,ov){
				if(nv.length<=1){
					this.sex=nv
					this.ruleForm.sex=nv
				}else{
					this.sex=ov
				}
			},
			age(nv,ov){
				//console.log(nv,ov)
				if(nv>=0&&nv<=60||nv==null){
					this.age=nv
					this.ruleForm.age=nv
					console.log(this.ruleForm.age)
				}else{
					this.age=ov
				}
			},
			phone(nv,ov){
				if(nv.length<=11){
					this.phone=nv
					this.ruleForm.phone=nv
				}else{
					this.phone=ov
				}
			},
			address(nv,ov){
				if(nv.length<=50){
					this.address=nv
					this.ruleForm.address=nv
				}else{
					this.address=ov
				}
			},
		}
	}
</script>

<style>
	.images{
		position: absolute;
		right: 0;
		top: 140px;
		width: 600px;
	}
</style>
